<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM" ref="btn">点我展示上方的 DOM 信息</button>
    <school ref="sch"/>
  </div>
</template>

<script>
  // 引入组件
  /*
    ref 属性：
      被用来给元素或子组件注册引用信息(id 的替代者);
      应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上是组件实例对象(vc);
      使用方式：
        打标识: <h1 v-text="msg" ref="xxx">.......</h1> 或 <School ref="xxx"/>
        获取：this.$refs.xxx
  */
  import School from './components/School' 

  export default {
    name:'App',
    components: { School},
    data(){
      return {msg: '欢迎学习 Vue'}
    },
    methods: {
      showDOM(){
        console.log(this.$refs.title) // 真实 DOM
        console.log(this.$refs.btn) // 真实 DOM
        console.log(this.$refs.sch) // School 组件的实例对象
      }
    },
    
  }
</script>
